<template>
  <el-dialog v-if="dialogFormVisible" v-el-drag-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="1000px" :title="title" append-to-body="true" @close="dialogClose">
    <el-table :data="outerDeputys" border style="width: 100%">
      <el-table-column label="序号" type="index" width="45" align="center" />
      <el-table-column label="处理环节" prop="wfnodeName" width="150" align="center" />
      <el-table-column label="外出人" prop="travelFullName" width="300" align="center" />
      <el-table-column label="代理人" prop="createTime" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.deputyIndex" :disabled="scope.row.invalid" placeholder="请选择">
            <el-option
              v-for="(item,index) in scope.row.deputys"
              :key="index"
              :label="item.deputyFullName"
              :value="index"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="发给本人" prop="completeTime" width="100" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.invalid">发本人</el-checkbox>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button plain icon="el-icon-close" type="default" @click="dialogClose">取 消</el-button>
      <el-button icon="el-icon-check" type="primary" @click="submitSelectOuterDeputyForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
    name: 'SelectOuterDeputy',
    components: {

    },
    props: {

    },
    data() {
        return {
            title: '选择代理人',
            dialogFormVisible: false,
            outerDeputys: [],
            submitRoute: null,
            outerDeputyResolve: null
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.$bus.on('selectOuterDeputys', this.selectOuterDeputys)
    },
    beforeDestroy() {
        this.$bus.on('selectOuterDeputys', this.selectOuterDeputys)
    },
    mounted() {

    },
    methods: {
        selectOuterDeputys(outerDeputys, submitRoute, outerDeputyResolve) {
            outerDeputys.forEach((deputyUser, index) => {
                deputyUser.deputyIndex = 0
            })
            this.outerDeputys = outerDeputys
            this.submitRoute = submitRoute
            this.outerDeputyResolve = outerDeputyResolve
            this.dialogFormVisible = true
        },
        submitSelectOuterDeputyForm() {
            this.outerDeputys.forEach(outer => {
                if (!outer.invalid) {
                    const taskNodes = this.$vnode.context.wfJsonData.routes[this.submitRoute.index].taskNodes
                    // 替换submitRoute中的处理人信息
                    for (const key in this.submitRoute) {
                        if (this.submitRoute[key].users) {
                            for (var i = 0; i < taskNodes.length; i++) {
                                if (taskNodes[i].name === key && taskNodes[i].type !== '3') {
                                    this.submitRoute[key].users.forEach(user => {
                                        if (user.id === outer.id) {
                                            user.deputy = outer.deputys[outer.deputyIndex]
                                        }
                                    })
                                }
                            }
                        }
                    }
                }
            })
            this.outerDeputyResolve({ 'code': 'success', 'message': '已选择外出代理人。' })
            this.handleDialogClose()
        },
        handleDialogClose() {
            this.dialogFormVisible = false
            this.outerDeputys = []
            this.outerDeputyResolve = null
        },
        dialogClose() {
            this.$bus.emit('closeDoingDialog')
            this.handleDialogClose()
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body{
    min-height:500px;

    .el-select{
        width: 100%;
    }

    .el-table .el-input.is-disabled .el-input__inner{
        background-color: #F5F7FA;
        border-color: #E4E7ED;
        color: #C0C4CC;
        cursor: not-allowed;
    }
}

</style>
